<template>
    <Scroller :data="sourceData">
        <template #item="{ index, item }">
            <div class="item-wrapper" :class="{ isFirst: index < 3 }">
                <div class="content">
                    <span class="icon" :class="{ 'spec':index < 3  }">{{ index + 1 }}</span>
                    <span>{{  item.attrName }}</span>
                    <span style="margin-left:auto; font-size:var(--24FontSize); margin-right:var(--xsPadding);">{{  item.rectifyCount }}</span>
                    <span>件</span>
                </div>
                <div class="progress-container">
                    <div class="progress-track"></div>
                    <div class="progress-value" :style="{ width:maxCount ? ( item.rectifyCount / maxCount * 100 ) + '%' : 0  }" ></div>
                </div>
            </div>
        </template>
    </Scroller>
</template>
<script setup>      
    import { watch, reactive, ref, onMounted } from 'vue';
    import ChartWrapper from '@/components/ChartWrapper.vue';
    import { getAttrAnalysis } from '@/api/board.js';
    import Scroller from '@/components/Scroller.vue';
    import Icon1 from '@/assets/icon-rank-1.png';
    import Icon2 from '@/assets/icon-rank-2.png';

    const option = ref({});
    const sourceData = ref([]);
    let maxCount = 0;
    onMounted(()=>{
        getAttrAnalysis()
        .then(res=>{
            if ( res.data.code === 200 ) {
                // 按告警数排序
                let arr = res.data.data.sort((a,b)=>{ return a.rectifyCount < b.rectifyCount ? 1 : -1 });
                maxCount = arr[0].rectifyCount;
                sourceData.value = arr;
            }
        })
    })
</script>
<style scoped lang="scss">
    .item-wrapper {
        color:#fff;
        display:flex;
        flex-direction: column;
        justify-content: space-around;
        padding:0 var(--mPadding);
        height:100%;
        .content {
            display:flex;
            align-items: center;
            color:#07D1FA;
            font-size:var(--baseFontSize);
            .icon {
                width:1.2vw;
                height:1.2vw;
                line-height:1.2vw;
                text-align:center;
                display:inline-block;
                background-repeat: no-repeat;
                background-size:contain;
                background-position: 50% 50%;
                color:#fff;
                margin-right:var(--sPadding);
                background-image:url(../../../assets/icon-rank-2.png);
            }
            .icon.spec {
                background-image:url(../../../assets/icon-rank-1.png);

            }
          
        }
        .progress-container {
            width:100%;
            height:var(--xsPadding);
            position:relative;
            .progress-track {
                height:100%;
                width:100%;
                position:absolute;
                left:0;
                top:0;
                background:rgba(255, 255, 255, 0.15);
            }
            .progress-value {
                height:100%;
                position:absolute;
                left:0;
                top:0;
                background-image: linear-gradient(270deg, #5fe2fc 0%, #1e5274 100%);      
            }
        }
    }
    .item-wrapper.isFirst {
        .content {
            color:#FFBA21;
        }
        .progress-container {
            .progress-value {
                background: linear-gradient(270deg, #ffbe21 0%, #ff7721 100%);
            }
        }
    }
</style>